<!DOCTYPE html>
<html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />  

    <script src="index.js"></script>
    <style>
      * {
          padding: 0;
          margin: 0;
          list-style: none;
      }

      body {
          display: flex;
          height: 100vh;
          justify-content: center;
          align-items: center;
          background-color: rgb(16, 179, 233);
      }

      .tree {
          position: relative;
          width: 500px;
          height: 700px;
          display: flex;
          justify-content: center;
      }

      .star {
          width: 50px;
          height: 50px;
          position: absolute;
          background-color: rgb(236, 234, 167);
          z-index: 999;
          margin-bottom: 40px;
          clip-path: polygon(50% 0, 65% 40%, 100% 40%, 72% 60%,
                  85% 100%, 50% 75%, 15% 100%, 28% 60%, 0 40%, 35% 40%);
      }
      .tree li{
          position: absolute;
          top: 25px;
          width: 2px;
          background: linear-gradient(rgba(46,204,113,0),rgba(46,204,113,.25));
          transform-origin: 50% 0;
          animation: swing 4s ease-in-out infinite;
          height: calc(var(--i)*4px);
          animation-delay:calc(var(--i)*-0.23s);
      }
      @keyframes swing{
          0%,
          100%{
              transform: rotate(-30deg);
          }
          5%,45%{
              opacity: 0.25;
          }
          0%,50%,100%{
              opacity: 1;
          }
          50%{
              transform: rotate(30deg);
          }
      }
      .tree li::before{
          content: '';
          position: absolute;
          left: -1px;
          bottom: 1px;
          width: 3px;
          height: 3px;
      }
      .tree li:nth-child(4n)::before{
          background-color: #D8334A;
      }
      .tree li:nth-child(4n+1)::before{
          background-color: #FFCE54;
      }
      .tree li:nth-child(4n+2)::before{
          background-color: #2ECC71;
      }
      .tree li:nth-child(4n+3)::before{
          background-color: #5D9CEC;
      }
  </style>
  </head>

  <body onload="run()" style="background-color: rgb(0, 0, 0);" >
    <ul class="tree">
      <div class="star"></div> 
   <canvas id="scene" width="520px" height="666px"  style="  display: block;  margin: 0 auto">
    </canvas>

  </ul>  
      <!-- <h1 id="h1"> 圣诞快乐！ </h1> -->
      <p  style = "font-size: 50px; top: 0px;text-align: center;">
        <span data-text="祝">祝 </span>
        <span data-text="您">您</span>
        <span data-text="圣">圣 </span>
        <span data-text="诞">诞</span>
        <span data-text="节">节</span>
        <span data-text="快">快</span>
        <span data-text="乐">乐</span>
        <span data-text="！">！</span> 
       
      </p>
    </div>
    </div>
     
  </body>
  <script>
    let tree = document.querySelector('.tree')
    for (let i = 0; i < 128; i++) {
        let li = document.createElement('li')
        li.style = "--i:" + i
        tree.appendChild(li)
    }
</script>
</html>
